<template>
  <view class="home">
    <view class="title">手机号登录</view>
    <view class="iptBlock" style="margin-bottom: 40rpx;">
      <image class="code-icon" src="../../static/images/phone.png" mode=""></image>
      <input type="text" v-model="fromLine.phone" class="ipt" placeholder="请输入手机号" placeholder-class="styles" />
    </view>
    <view class="iptBlock" style="margin-bottom: 100rpx;">
      <image class="code-icon" src="../../static/images/code.png" mode=""></image>
      <input type="text" class="ipt" maxlength="4" v-model="fromLine.sms_code" placeholder="请输入验证码"
        placeholder-class="styles" />
      <view class="code-txt" @click="sendCode" v-if="!btnDisabled">
        获取验证码
      </view>
      <view class="code-txt" v-if="btnDisabled" style="font-size: 30rpx;">
        {{ countdown + " " + "s" }}
      </view>
    </view>
    <view class="loginBtn" @click="handleLogin">登录</view>
    <view class="agreement" @click="handleToggle">
      <image class="round" :src="checked?'../../static/images/radioActive.png':'../../static/images/radio.png'" mode="">
      </image>
      已阅读并同意
      <text class="xiey" @click.stop="toXiyiPage('sys_user_agree')">《用户协议》</text>
      和
      <text class="xiey" @click.stop="toXiyiPage('sys_userr_privacy')">《隐私政策》</text>
    </view>
    <image v-if="is_android" @click="toBindPage" class="wechat" src="../../static/images/wechat.png" mode=""></image>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        fromLine: {
          phone: "",
          sms_code: ""
        },
        checked: false,
        btnDisabled: false,
        timer: null,
        countdown: 0,
        appUserInfo: null, // 微信登录保存的用户信息
        is_android: uni.getSystemInfoSync().platform === 'android'
      }
    },
    methods: {
      // 协议
      toXiyiPage(type) {
        uni.navigateTo({
          url: `/pages/mine/aboutUs?type=${type}`
        })
      },
      // 发送验证码
      sendCode() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "请输入手机号",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.sendMsg({
          phone: this.fromLine.phone,
          type: "login"
        }).then(res => {
          uni.showToast({
            title: "验证码发送成功",
            duration: 1500,
            icon: 'none',
            mask: true
          })
          this.countdown = 10;
          this.btnDisabled = true;
          if (this.timer) clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown -= 1;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.btnDisabled = false;
            }
          }, 1000);
        })
      },
      handleToggle() {
        this.checked = !this.checked;
      },
      wxLoginApi() {
        const that = this
        reqApi.wechatAuth({
          auth: {
            type: 'wechat',
            auth: {
              code: that.appUserInfo.code
            }
          },
          code: that.appUserInfo.code
        }).then(res => {
          console.log("返回授权信息", res);
          let info = res.data.result;
          console.log("info", info.user);
          if (info.user) {
            console.log("不用绑定微信");
            uni.setStorageSync("token", info.token);
            uni.setStorageSync("userInfo", info.user);
            uni.switchTab({
              url: `/pages/home/index`
            })
          }
        }).catch(err => {
          console.log("注销信息", err);
          console.log("注销信息状态", err.status);
          if (err.status == 200) {
            uni.navigateTo({
              url: `/pages/login/bindPhone?key=${err.data.result.key}`
            })
          }
        })
      },
      toBindPage() {
        if (!this.checked) {
          uni.showToast({
            title: "请勾选协议",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        let self = this;
        uni.login({
          provider: 'weixin',
          onlyAuthorize: true,
          success: function(loginRes) {
            console.log('微信授权信息：', loginRes)
            self.appUserInfo = loginRes;
            self.wxLoginApi();
          },
          fail(error) {
            console.log(error)
            uni.showToast({
              title: '登录失败',
              icon: 'none',
              duration: 2000
            })
          }
        });
      },
      // 验证码登录
      handleLogin() {
        if (!this.fromLine.phone) {
          uni.showToast({
            title: "手机号不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.fromLine.sms_code) {
          uni.showToast({
            title: "验证码不能为空",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        if (!this.checked) {
          uni.showToast({
            title: "请勾选协议",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        }
        reqApi.login(this.fromLine).then(res => {
          console.log("登录成功");
          uni.setStorageSync("token", res.data.token);
          reqApi.getUserInfo({}).then(res => {
            console.log("获取用户信息", res);
            uni.showToast({
              title: "登录成功",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
            uni.setStorageSync("userInfo", res.data);
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/home/index"
              })
            }, 1500)
          })
        })

      },
    }
  }
</script>

<style lang="scss" scoped>
  .wechat {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .home {
    padding: 0 40rpx;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding-top: 140rpx;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 40rpx;
      color: #222222;
      margin-bottom: 100rpx;
    }

    .iptBlock {
      width: 100%;
      height: 104rpx;
      background: #F7F7F7;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;

      .code-icon {
        width: 48rpx;
        height: 48rpx;
      }

      .ipt {
        flex: 1;
        padding: 0 10rpx;
        box-sizing: border-box;
      }

      .code-txt {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #EEA800;
      }
    }

    .loginBtn {
      width: 100%;
      height: 88rpx;
      background: #EEA800;
      border-radius: 200rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }

    .agreement {
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
      justify-content: center;

      .round {
        width: 36rpx;
        height: 36rpx;
      }

      .xiey {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #222;
      }
    }
  }
</style>